<template>
	<view class="content">
		<navbars id="navbar"></navbars>
		<loading-page mode="zoom" :show="isLoading"></loading-page>
		<view class="main" v-if="!isLoading">
			<cc-defineCateList :residueHeight="residueHeight" :navbarHeight="navbarHeight" :data="data"
				@click="cateItemClick"></cc-defineCateList>
		</view>
		<!-- <tabbar id="tabbar" :current="1"></tabbar> -->
		<tabbar id="tabbar"></tabbar>
	</view>
</template>
<script>
	import navbars from './components/navbar.vue'
	import ccDefineCateList from '@/uni_modules/cc-defineCateList/components/cc-defineCateList/cc-defineCateList.vue'
	export default {
		components: {
			ccDefineCateList,
			navbars
		},
		data() {
			return {
				isLoading: true,
				navbarHeight: 0,
				residueHeight: 0,
				// 列表数组 navtitle:标题 shop:展示列表
				data: []
			}
		},
		mounted() {
			uni.hideTabBar({
				success: () => {},
				fail: (ex) => {
					console.log(ex)
					// 捕获报错，防止没有tabbar页面调用后控制台报错
				}
			});
			this.getCategory()
		},
		methods: {
			getCategory() {
				this.$get("productCategory/list").then(res => {
					this.getNavbarHeight()
					this.data = res.data
				}).catch(ex => {
					this.$errorToast()
				});
			},
			getNavbarHeight() {
				this.$nextTick(() => {
					const {
						platform
					} = uni.getSystemInfoSync();
					const query = uni.createSelectorQuery().in(this);
					query.select('#tabbar').boundingClientRect();
					query.select('#navbar').boundingClientRect();
					query.exec(res => {
						const tabbarHeight = res[0].height;
						this.navbarHeight = res[1].height;
						let systemInfo = uni.getSystemInfoSync(); //获取系统信息
						// 计算底部安全区域高度
						let bottomSafeAreaHeight = systemInfo.screenHeight - systemInfo.safeArea.bottom;
						if (platform === 'ios') {
							this.residueHeight = this.$getSystemInfo('windowHeight') -
								bottomSafeAreaHeight - 70 -
								this.navbarHeight
						} else if (platform === 'android') {
							this.residueHeight = this.$getSystemInfo('windowHeight') - 70 - this
								.navbarHeight
						} else {
							this.residueHeight = this.$getSystemInfo('windowHeight') - tabbarHeight -
								this.navbarHeight
						}
						this.isLoading = false
					});
				})
			},
			cateItemClick(item) {
				this.$navigateTo('/subPackages/search/list?category_id=' + item.id)
			},
		}
	}
</script>

<style>
	page {

		background-color: #f7f7f7;
	}

	.content {
		display: flex;
		flex-direction: column;

	}
</style>